<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--localhost:8080/fileupload-sso.html-->
    <title>文件上载演示</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        button{
            border: 0;
            padding: 6px;
            background-color: #dc143c;
            color: #f0ffff;
            font-family: "幼圆",serif;

        }


    </style>
</head>
<body>
<form id="fileForm" method="post" enctype="multipart/form-data" onsubmit="return doUpload()">
    <div>
        <ul>
            <li>
                <label>选择文件
                    <input id="uploadFile" type="file" name="uploadFile">
                </label>
            </li>
            <li>
                <label>上传文件
                    <button type="submit">上传文件</button>
                </label>
            </li>
        </ul>

    </div>

</form>
</body>
<script>
    //jquery代码的表单提交事件
    function doUpload() {
        // debugger//debug窗口打开以后调试代码
        //获得用户选中的所有图片(获得数组)
        let files = document.getElementById("uploadFile").files;
        if (files.length > 0) {
            //获得用户选中的唯一图片(从数组中取出)
            let file = files[0];
            //开始上传这个图片
            //由于上传代码比较多,不想和这里其它代码干扰,所以定义一个方法调用
            upload(file);
        }
        //阻止表单提交效果
        return false;
    };


    // 将file上传到服务器的方法
    function upload(file) {
        //定义一个表单
        let form = new FormData();
        //将图片添加到表单中
        form.append("uploadFile", file);
        //异步提交

        axios({
            url: "http://localhost:9999/sca/resource/upload/",
            method: "post",
            data: form
        }).then((response)=> {
            let result = response.data;
            if (result.state&&result.state==429){
                alert(result.message);

            }else{
                alert("upload ok")
            }

            console.log(response.data);
        }).catch((e)=>{


        })
    }
</script>
</html>
